<div class="module-complain">
    <div class="complain-header">
        <h2 class="complain-header-title">我要申訴</h2>
        <div class="complain-header-info">
            <p>如果您的權益受到損害，請在此處填寫申訴單，客服會在1-2個工作日處理。</p>
            <p>您也可以直接咨詢在線客服或撥打400-0000-0000。</p>
        </div>
    </div>
    <validator :rules="rules">
        <form class="m-form-page" name="form" action="javascript:;">
            <div class="col-row">
                <div class="col-label">
                    <label>申訴訂單號</label>
                </div>
                <div class="col-input">
                    <input v-model="transOrderId"
                           id="transOrderId"
                           type="text"
                           disabled
                           class="input">
                    <div class="ui-tip"></div>
                </div>
            </div>
            <div class="col-row">
                <div class="col-label">
                    <label>申訴原因</label>
                </div>
                <div class="col-input">
                    <select class="fn-block col-select"
                            name="reason"
                            v-model="form.reason">
                        <option value="">請選擇申訴原因</option>
                        <option v-for="item in complainReasons"
                                :value="item">{{item}}
                        </option>
                    </select>
                    <!--<textarea name="reason"-->
                              <!--class="input fn-block"-->
                              <!--autocomplete="off"-->
                              <!--placeholder="請填寫申訴原因"-->
                              <!--v-model="form.reason"-->
                              <!--rows="4"></textarea>-->
                    <div class="ui-tip"></div>
                </div>
            </div>
            <div class="col-row">
                <div class="col-label">
                    <label>聯繫方式</label>
                </div>
                <div class="col-input">
                    <input v-model="form.phone"
                           id="phone"
                           name="phone"
                           type="text"
                           placeholder="請輸入手機號"
                           autocomplete="new-password"
                           class="input fn-block">
                    <div class="ui-tip"></div>
                </div>
            </div>
            <div class="col-row">
                <div class="col-label">
                    <label>付款方式</label>
                </div>
                <div class="col-input">
                    <select class="fn-block col-select"
                            name="payType"
                            v-model="form.payType">
                        <option value="">請選擇付款方式</option>
                        <option v-for="item in payTypeList"
                                :value="item.val">{{item.text}}
                        </option>
                    </select>
                    <div class="ui-tip"></div>
                </div>
            </div>
            <div class="col-row">
                <div class="col-label">
                    <label>渠道流水號</label>
                </div>
                <div class="col-input">
                    <input type="text"
                           name="payNo"
                           class="input fn-block"
                           maxlength="40"
                           autocomplete="off"
                           placeholder="請輸入交易流水號"
                           v-model="form.payNo">
                    <div class="ui-tip"></div>
                </div>
            </div>
            <div class="col-row">
                <div class="col-label">
                    <label>付款截圖</label>
                </div>
                <div class="col-input col-idcard" style="width: 168px">
                    <div class="idcard-left">
                        <div class="idcard-left-bk" v-if="certificatePhotoSrc === '../img/certificate1.jpeg'"></div>
                        <img :src="certificatePhotoSrc" alt="" width="168">
                    </div>
                    <div class="idcard-right">
                        <div class="file-container">
                            <file-upload class="my-file-uploader"
                                         name="certificatePhoto"
                                         id="certificatePhoto"
                                         action="/exchangeApi/common/upload-photo/private"
                                         v-on:onFileClick="onFileClick"
                                         v-on:deleteFile="deleteFile"
                                         v-on:onFileUpload="onFileUpload">↑Upload
                            </file-upload>
                            <div class="ui-tip" v-if="certificatePhotoTip">請上傳憑證</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-row">
                <div class="col-label">
                    <label>備註信息</label>
                </div>
                <div class="col-input" style="width: 480px;">
                        <textarea name="remark"
                                  class="input fn-block"
                                  autocomplete="off"
                                  placeholder="如您有想申訴的內容未在列表中展示，請在此填寫"
                                  v-model="form.remark"
                                  rows="5"></textarea>
                    <div class="ui-tip"></div>
                </div>
            </div>
            <div class="col-row col-row--btns">
                <div class="col-label">
                    <label>&nbsp;</label>
                </div>
                <div class="col-text">
                    <button type="submit"
                            class="ui-btn ui-btn--block"
                            v-if="isRequesting === false"
                            @click="submit()">申訴
                    </button>
                    <button type="submit"
                            class="ui-btn"
                            disabled
                            v-if="isRequesting === true">操作中...
                    </button>
                </div>
            </div>
        </form>
    </validator>

    <Success v-if="isShowSuccess" v-on:successCallback="returnOrderList"></Success>
</div>
